<template>
  <div class="win">
    <div
      v-if="item.description!=''"
      @click="hr_informationdetailed(item)"
      class="item"
      :class="item.status==2?'black':'grey'"
      v-for="(item, index) in information"
      :key="index"
    >
      <div class="item_top_box">
        <div v-if="item.status==2" class="red_box"></div>
        <p class="title ellipsis">{{item.title}}</p>
        <p class="time">{{item.create_time}}</p>
      </div>
      <div class="item_bottom_box">
        <!-- <p class="word ellipsis2">{{item.description}}</p> -->
        <wxParse :content="item.description" />
        <div @click.stop>
          <img
            @click="deleteData(index,item.news_id)"
            v-if="bjurl"
            :src="bjurl+'information_logo.png'"
          />
        </div>
      </div>
    </div>
    <i-toast id="toast" />
    <i-modal :visible="popupShow" @ok="popupConfirm" @cancel="popupCancel">
      <view>确定删除该条消息吗</view>
    </i-modal>
  </div>
</template>

<script>
import wxParse from "mpvue-wxparse";
export default {
  data() {
    return {
      bjurl: "",
      information: [],
      newsList: null,
      popupShow: false
    };
  },
  methods: {
    // 请求接口信息列表
    getInformation() {
      this.$ajax("/home/news/index", "post", {})
        .then(res => {
          

          if (res.status) {
            this.information = res.data;
          } else {
          }
        })
        .catch(err => {});
    },
    // 请求接口删除信息
    getDetele() {
      this.$ajax("/home/news/news_del", "post", {
        news_id: this.newsList.news_id
      })

        .then(res => {
          if (res.status) {
            this.popupShow = false;
            this.information.splice(this.newsList.index, 1);
            this.$toast({
              content: "删除成功"
            });
          } else {
            this.$toast({
              content: "删除失败"
            });
          }
        })
        .catch(err => {});
    },
    // 删除按钮
    deleteData(index, news_id) {
      this.newsList = {
        index,
        news_id
      };
      this.popupShow = true;
    },
    //取消删除
    popupCancel() {
      this.popupShow = false;
      this.information[this.newsList.index].delete = undefined;
    },
    // 确认删除
    popupConfirm(e) {
      this.getDetele();
    },
    //跳转到信息详细
    hr_informationdetailed(item) {
      wx.navigateTo({
        url: "../informationDetailed/main?news_id=" + item.news_id
      });
    }
  },
  components: {
    wxParse
  },
  onShow() {
    this.getInformation();
  },
  onLoad(e) {
    Object.assign(this.$data, this.$options.data());
    this.newsList = this.newsList;
    this.bjurl = this.$bjurl;
    this.popupShow = this.popupShow;
  }
};
</script>

<style lang="scss" scoped>
@import url("~mpvue-wxparse/src/wxParse.css");
.win {
  .item {
    margin: 20rpx auto 0;
    background-color: #ffffff;
    width: 690rpx;
    box-sizing: border-box;
    font-weight: bold;
    .item_top_box {
      height: 110rpx;
      line-height: 110rpx;
      width: 690rpx;
      border-bottom: 1rpx solid #f3f3f3;
      position: relative;
      box-sizing: border-box;
      padding: 0 18rpx 0 70rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .red_box {
        position: absolute;
        left: 22rpx;
        top: 43rpx;
        width: 24rpx;
        height: 24rpx;
        background-color: #ff5a5f;
        border-radius: 50%;
      }
      .title {
        width: 320rpx;
        font-size: 30rpx;
      }
      .time {
        font-size: 26rpx;
      }
    }
    .item_bottom_box {
      position: relative;
      padding: 26rpx 20rpx 50rpx;
      /deep/ .wxParse {
        width: 640rpx;
        font-size: 28rpx;
        text-indent: 50rpx;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
      }

      img {
        position: absolute;
        width: 39rpx;
        height: 37rpx;
        bottom: 12rpx;
        right: 25rpx;
      }
    }
  }
  .black {
    color: #333333;
    .time {
      color: #999999;
    }
  }
  .grey {
    color: #999999;
    font-weight: 500;
    /deep/ .wxParse {
      color: #999999;
      font-weight: 500;
    }
  }
}
</style>
